<template>
	<view class="content">
		<view class="statusBarHeight">
			<view class="returnPage">
				<u-icon name="arrow-left" @click="navigateBack()" color="#333" size="calc(40vmin / 7.5)"></u-icon>
			</view>
		</view>
		<view class="user_list">
			<block v-for="(item,index) in data.list">
				<image v-if="index!=data.list.length-1||data.online.status==1||data.online.status==3" 
				 @click="magnify(item)"
					:src="(item.docx&&item.check==1)||data.online.status==2?item.user_pic:'https://img1.baidu.com/it/u=1846053355,3314243538&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=519'"
					mode="aspectFit"></image>
				<view class="answerText" v-else @click="magnify({user_id:0,docx:data.online.docx})">
					答案：{{item.answer}}
				</view>
			</block>

		</view>
		<view class="frame">
			<view class="video" v-if="data.online.status==1||item_id">
				

				<image  class="text" v-if="!data.online.num_s"  :src="imgUrl" mode=""></image>
				<video  v-else :src="imgUrl" object-fit="contain" muted></video>
				<video v-if="!userOnline.user_id&&!textShow" id="introduceVideo" :class="textShow?'video_':''" autoplay :src="data.online.docx"
					controls object-fit="fill"></video>
					
					
				<!--   <view class="text">
		     	  虎毒不食子
		     </view> -->
			</view>
			<view class="video" v-else>
				<image class="text" :src="data.quest.pic" mode=""></image>
			</view>

<!-- 			<view class="btn" v-if="data.online.num_s!=data.online.num_sum">
				<button v-if="userOnline.user_id&&data.online.num_s<data.online.num_sum-1" class="button"
					open-type="share">
					转发下一棒
				</button>
				<view class="button" @click="set" v-else-if="data.online.num_s<data.online.num_sum-1">
					{{textShow?'开始挑战':'接受挑战'}}
				</view>

				<block v-else>
					<view class="button" @click="submitAnswer">
						提交答案
					</view>
					<input type="text" placeholder="请输入最终答案" v-model="answer" />
				</block>
			</view> -->
			
			<view class="btn" v-if="(data.online.num_s!=data.online.num_sum)&&data.online.status==1">
				<view class="button" v-if="data.online.num_s" @click="add" >
					发起新的挑战
				</view>
				<view class="button" @click="navigateBack" v-if="!userOnline.user_id&&data.online.num_s">
					不敢挑战
				</view>
					<button v-if="userOnline.user_id&&data.online.num_s<data.online.num_sum" class="button"
						open-type="share">
						转发下一棒
					</button>
					
					<view class="button" @click="set" v-else-if="data.online.num_s<data.online.num_sum-1||!data.online.num_s">
						{{textShow?(data.online.num_s?'开始挑战':'发起挑战'):'接受挑战'}}
					</view>
					<block v-else>
						<view class="button" @click="submitAnswer">
							提交答案
						</view>
						<input type="text" placeholder="请输入最终答案" v-model="answer" />
					</block>
					
			
					
				</view>
			
		</view>
		<!-- <web-view src="https://static-3440546a-c254-4f15-9a99-d12987be7570.bspapp.com/echarts/js/index.html"></web-view> -->
    <u-popup :show="coupShow" mode="center" :safeAreaInsetBottom="false" closeable round="calc(12vmin / 7.5)"  @close="coupShow=false">
    	<view style="padding: 0 calc(50vmin / 7.5);width: calc(100vw - calc(800vmin / 7.5));">
    		<view class=""
    			style="font-size: calc(36vmin / 7.5);color: #333333;text-align: center;font-weight: 700;margin: calc(110vmin / 7.5) auto;">
    			奖励到账，前往 我的-优惠券 查看奖励！
    		</view> 
    		<view class="" style="display: flex;justify-content: space-between;margin-bottom: calc(30vmin / 7.5);">
    			<view class="anew_btn" @click="coupGo">
    				去查看
    			</view>
    			<view class="anew_btn" @click="coupShow=false">
    				查看答案
    			</view>
    		</view>
    	</view>
    </u-popup>
	</view>
</template>

<script>
	// import sign from '@/components/sign/sign.vue'
	export default {
		components: {

		},
		data() {
			return {
				textShow: false,
				coupShow:false,
				userData: {},
				userOnline: {},
				onlineId: '',
				imgUrl: '',
				data: {},
				answer: '',
				user_id_s:'',
				item_id:0
			}
		},
		onLoad(e) {
			console.log('测试', e)
			this.onlineId = e.onlineId
			this.user_id_s = e.user_id_s||''
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")
			this.upData()
		},
		methods: {
			add(){
				this.$myRuquest('home/online/online_save', {
					type_id: this.data.online.type_id
				}).then(res => {
					
					uni.redirectTo({
						url: `./challengeingVideo?onlineId=${res.data.online.id}`
					})
				})
			}, 
			upData() {
				this.$myRuquest('home/online/online_det', {
					online_id: this.onlineId,
					user_id_s:this.user_id_s||this.userData.id
				}).then(res => {
					if(res.data.code==401){
						uni.showToast({
							title: '您已参加过该挑战',
							icon:'none'
						});
						setTimeout(()=>{
							uni.redirectTo({
							url:'/pages/challengeList/challengeList'
						})
						},1500)
						
					}else if(res.data.online.status!==1){
						if(res.data.online.status!=3) this.coupShow=true
						let msg='该挑战已完成！'
						if(res.data.online.status===3) msg='该挑战已过期！'
						uni.showToast({
							title: msg,
							icon:'none'
						});
					}
				  this.data = res.data
					this.data.online.num_s=res.data.list.length
					this.userOnline = res.data.list.filter(item => item.user_id == this.userData.id)[0] //是否挑战过
					if (res.data.list.length != res.data.online.num_sum) {
						let num = res.data.online.num_sum - res.data.list.length
						for (let index = 0; index < num; index++) {
							res.data.list.push({})
						}
					}
					
					let predecessor = res.data.list.filter(item => item.check == 1)[0]
					this.imgUrl = this.userOnline ? this.userOnline.docx : (this.data.online.num_s ? predecessor
						.docx : this.data.quest.pic)
			
				})
			},  
			
		// 	upData() {
		// 		this.$myRuquest('home/online/online_det', {
		// 			online_id: this.onlineId,
		// 			user_id_s:this.user_id_s||this.userData.id
		// 		}).then(res => {
		// 			this.data = res.data
		// 			this.data.online.num_s=res.data.list.length
		// 			this.userOnline = res.data.list.filter(item => item.user_id == this.userData.id)[0] //是否挑战过
		// 			if (res.data.list.length != res.data.online.num_sum) {
		// 				let num = res.data.online.num_sum - res.data.list.length
		// 				for (let index = 0; index < num; index++) {
		// 					res.data.list.push({})
		// 				}
		// 			}
				
		// 			let predecessor = res.data.list.filter(item => item.check == 1)[0]
		// 						console.log("predecessor",predecessor)
		// 			this.imgUrl = this.userOnline ? this.userOnline.docx : (this.data.online.num_s ? predecessor
		// 				.docx : this.data.quest.pic)
		// 		})
		// 	},
		
			magnify(item){
					console.log(item)
				if(item){
				
					this.item_id=item.user_id
				  this.imgUrl=item.docx
				}
				
				// if((item.docx&&item.check==1)||this.data.online.status==2) this.$util.enlargement([item.user_pic],0);''
			},
			submitAnswer() {
				this.$myRuquest('home/online/online_do', {
					online_id: this.onlineId,
					user_id_s:this.user_id_s,
					docx: this.answer
				}).then(res => {
					this.coupShow=true 
					this.upData()
				})
			},
			coupGo(){
				this.coupShow=false
				uni.navigateTo({
					url:'/pages/me/myCoupon/myCoupon'
				})
			},
			set() {
				// if(this.data.online.num_s<=this.data.online.num_sum) return 
				if (this.textShow) {
					let that = this;
								uni.chooseMedia({
									count:1,
									mediaType:['video'],
									sourceType: ['camera', 'album'],
									success: function (res) {
										uni.showLoading({
											title: '加载中'
										});
										uni.uploadFile({
										   url: 'https://wjlm.goldsu.cn/home/upload/upload_docx',
										   header: {
										    'User-Type': 'unit'
										   }, 
										   filePath: res.tempFiles[0].tempFilePath,
										   name: 'file',
										   timeout: 30000,
										   success(res){
												 console.log('上传结果',res)
										    // uni.showToast({title:'上传成功！'})
										    that.$myRuquest('home/online/online_do', {
										    	online_id: that.onlineId,
													user_id_s:that.user_id_s,
										    	docx: JSON.parse(res.data).data
										    }).then(res => {
													console.log('传递结果',res)
										    	uni.showToast({
										    		title: res.msg,
										    		icon: "none"
										    	})
													that.user_id_s=''
													that.upData()
										    })
										   },
										   fail(err){
										    uni.showToast({title:'请求超时！',icon:'none'})
										   },
										   complete() {
										    uni.hideLoading()
										   }
										})
										
									},
									fail(err) {
										console.log(err)
									}
								});
				}else{
					uni.createVideoContext('introduceVideo').pause()
					this.textShow = true
				}
				
			},
			nav() {
				uni.navigateTo({
					url: `./drawingBoard?onlineId=${this.data.online.id}`
				})
			},
			navigateBack() {
				uni.redirectTo({
					url:'/pages/challengeList/challengeList'
				})
			},
			onShareAppMessage (){
				this.$myRuquest('home/online/online_share', {
					online_id: this.onlineId,
				})
				return{
					path:'/pages/challengeList/challengeing/challengeingVideo?onlineId='+this.onlineId+'&user_id_s='+this.userData.id,
					imageUrl:'https://wjlm.goldsu.cn/file/20221230140915.png'
				}
			}

		}
	}
</script>

<style lang="scss">
	.anew_btn {
		width: calc(234vmin / 7.5);
		height: calc(68vmin / 7.5);
		line-height: calc(68vmin / 7.5);
		border-radius: calc(34vmin / 7.5);
		text-align: center;
		background-color: #FED194;
		color: #AC7D3D;
		font-size: calc(28vmin / 7.5);
	}
	.content {
		background-image: linear-gradient(to top, rgba(254, 209, 148, .4), #ffffff, #ffffff, rgba(254, 209, 148, .4));

		width: 100vw;
		height: 100vh;
	}

	.returnPage {
		position: fixed;
		top: 0;
		left: 0;
		padding: 20upx;
	}

	.frame {
		width: calc(100vw - calc(140vmin / 7.5));
		// height: calc(400vmin / 7.5);
		padding: calc(20vmin / 7.5) calc(100vmin / 7.5);
		display: flex;
		justify-content: center;

		.video {
			width: calc(900vmin / 7.5);
			height: calc(500vmin / 7.5);
			border-radius: calc(10vmin / 7.5);

			position: relative;

			video ,image{
				width: 100%;
				height: 100%;
				transition: all 2s;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9;
				display: block;
				margin: 0 auto;
			}

			.video_ {
				width: 0%;
			}

			.text {
				text-align: center;
				line-height: calc(500vmin / 7.5);
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				box-shadow: 0 0 calc(15vmin / 7.5) #ccc;

				background-color: #FFFFFF;
				font-size: calc(50vmin / 7.5);
				font-weight: 700;
			}
		}

		.btn {
			flex: 1;
			padding: 0 calc(80vmin / 7.5);
			padding-top: calc(80vmin / 7.5);
			display: flex;
			flex-direction: column-reverse;
justify-content: space-around;
			.button {
				background-color: #000000;
				color: #FED194;
				line-height: calc(80vmin / 7.5);
				text-align: center;
				// background-image: linear-gradient(to bottom,rgba(254, 209, 148, .4),rgba(106, 86, 60, .24),rgba(59, 59, 59, 1));
				height: calc(80vmin / 7.5);
				border-radius: calc(12vmin / 7.5);
				width: calc(420vmin / 7.5);
				margin: 0 auto;
			}

			input {
				margin-bottom: 20upx;
				border: 1upx solid #cccccc;
				background-color: #FFFFFF;
				padding: calc(20vmin / 7.5);
				border-radius: calc(8vmin / 7.5);
			}
		}
	}

	.user_list {
		display: flex;
		padding: 0 calc(100vmin / 7.5);
		justify-content: space-between;

		.answerText {
			width: calc(220vmin / 7.5);
			height: calc(140vmin / 7.5);
			line-height: calc(140vmin / 7.5);
			background-color: #FFFFFF;
			text-align: center;
			font-size: calc(28vmin / 7.5);
		}

		image {
			width: calc(220vmin / 7.5);
			height: calc(140vmin / 7.5);
		}
	}

	.palette {
		width: 100vw;
		height: calc(600vmin / 7.5);
	}
</style>
